<template>
	<view>
		<view
			style="border-left: none; border-right: none; padding-bottom: 0; background-color: #f1f1f1;">
			<view class="datePickBox">
				<uni-datetime-picker type="date" v-model="searchDate" @change="checkDate"
					:clear-icon="false" style="background-color: #e2e2e2;  border-radius: 20rpx;" />
			</view>
			<view class="midBoxContent">
				<view class="header" style="">宿舍</view>
				<view class="header" style="text-align: center;">姓名</view>
				<view class="header" style="text-align: right;">状态</view>
			</view>
			<view :class="index == 0 ?'firstBox' : ''" class="container" v-for="(item,index) in unCheckStudentList"
				:key="index" style="display: flex; align-items: center; ">
				<view class="" style="width: 200rpx; text-align: left;">
					<view class="">{{item.dormitoryNo}}</view>
					<view class="" style="color: #aaa;">
						{{item.buildingNo =='1' ?'畔湖苑':(item.buildingNo =='5'?'听湖苑':'')}}/{{convertToChineseNumeral(item.storey)}}层
					</view>
				</view>
				<view class="" style="width: 200rpx;text-align: center;">{{item.studentName}}</view>
				<view class="" style="text-align: right; width: 200rpx; margin-left: 40rpx;">
					<view v-if="attenceStatus ==2">
						<view class="button" style="background-color: grey;" @click="toNotCheck(item)">未打卡</view>
						<view class="textBox">需要完成补卡</view>
					</view>
					<view v-if="attenceStatus ==5">
						<view class="button" style="background-color: #0042f4;" @click="toViolation(item)">违纪打卡
						</view>
						<view class="textBox">查看违纪原因</view>
					</view>
					<view v-if="attenceStatus ==4">
						<view class="button" style="background-color: #0042f4;" @click="toApply(item)">已请假
						</view>
						<view class="textBox">查看请假原因</view>
					</view>
					<view v-if="attenceStatus ==6">
						<view class="button" style="background-color: #0042f4;" @click="toAbsenceFromDuty(item)">缺勤
						</view>
						<view class="textBox">查看缺勤原因</view>
					</view>
				</view>
			</view>
			<view class="" style="position: absolute; left: 10%; top: 100%;" v-if="unCheckStudentList.length <= 0">
				<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode=""></image>
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	import dormitoryCheck from "@/api/modules/dormitoryCheck.js"
	import teacherClass from "@/api/modules/teachClass.js"
	import taskNotReturned from "@/api/modules/taskNotReturned.js"
	import {
		parseTime
	}
	from "@/utils/date.js"
	export default {
		data() {
			return {
				// 左箭头返回地址
				bzrUrl: "/pages/index/supervisorIndex",
				// 用户名
				topName: "学生列表",
				userName: "",
				// 查询日期
				searchDate: "",
				// 身份
				userInfo: "",
				// 楼栋列表
				buildList: [],
				// 楼栋NO
				buildNo: "1",
				// 未打卡学生列表
				unCheckStudentList: [],
				// 当前页面
				current: 0,
				// 分段器头部
				items: ["畔湖苑", "听湖苑"],
				attenceStatus: "",
				storey: "",
			}
		},
		methods: {
			checkDate(e) {
				this.searchDate = e
				this.getSdAttenceByCondition()
			},
			toApply(item) {
				uni.navigateTo({
					url: `/pages_main/managementTeacher/absenceApply/absenceApply?studentId=${item.studentId}&id=${item.id}&accessDate=${item.accessDate}&reason=${item.reason}&buildNo=${this.buildNo}&searchDate=${this.searchDate}&current=${this.current}&storey=${this.storey}&attenceStatus=${this.attenceStatus}`
				})
			},
			toViolation(item) {
				uni.navigateTo({
					url: `/pages_main/managementTeacher/violationHandle/violationHandle?studentId=${item.studentId}&id=${item.id}&accessDate=${item.accessDate}&buildNo=${this.buildNo}&searchDate=${this.searchDate}&processInstanceId=${item.processInstanceId}&current=${this.current}&flag=9&storey=${this.storey}&attenceStatus=${this.attenceStatus}`
				})
			},
			toProcess(item) {
				uni.navigateTo({
					url: `/pages_main/managementTeacher/processHandle/processHandle?studentId=${item.studentId}&id=${item.id}&accessDate=${item.accessDate}&reason=${item.reason}&buildNo=${this.buildNo}&searchDate=${this.searchDate}&current=${this.current}`
				})
			},
			toAbsenceFromDuty(item) {
				uni.navigateTo({
					url: `/pages_main/managementTeacher/absenceFromDuty/absenceFromDuty?studentId=${item.studentId}&id=${item.id}&accessDate=${item.accessDate}&reason=${item.reason}&buildNo=${this.buildNo}&searchDate=${this.searchDate}&current=${this.current}&storey=${this.storey}&attenceStatus=${this.attenceStatus}`
				})
			},
			toCompleteCheck(item) {
				uni.navigateTo({
					url: `/pages_main/managementTeacher/completeCheck/completeCheck?studentId=${item.studentId}&mendCardPhoto=${item.mendCardPhoto}&modifyTime=${item.modifyTime}&buildNo=${this.buildNo}&searchDate=${this.searchDate}&current=${this.current}`
				})
			},
			toNotCheck(item) {
				uni.navigateTo({
					url: `/pages_main/managementTeacher/notCheck/notCheck?studentId=${item.studentId}&id=${item.id}&accessDate=${item.accessDate}&buildNo=${this.buildNo}&searchDate=${this.searchDate}&current=${this.current}&flag=9&storey=${this.storey}&attenceStatus=${this.attenceStatus}`
				})
			},
			convertToChineseNumeral(num) {
				if (num == 10) {
					return '十'
				} else if (num == 1) {
					return '一'
				}
				const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
				const units = ['', '十', '百', '千', '万'];
				let result = '';
				let numStr = num.toString();
				for (let i = 0; i < numStr.length; i++) {
					let digit = parseInt(numStr.charAt(i));
					let unit = units[numStr.length - i - 1];
					if (digit === 0) {
						// 当前数字为0时不需要输出汉字，但需要考虑上一个数字是否为0，避免出现连续的零
						if (result.charAt(result.length - 1) !== '零') {
							result += '零';
						}
					} else {
						result += digits[digit] + unit;
					}
				}
				// 对于一些特殊的数字，如10、100等，需要在最前面加上“一”
				if (result.charAt(0) === '一') {
					result = result.substr(1, result.length);
				} else if (result.charAt(0) === '百') {
					result = '一' + result;
				} else if (result.charAt(0) === '千') {
					result = '一' + result;
				}
				return result;
			},
			// 楼栋列表
			findDormBuilding() {
				dormitoryCheck.findDormBuilding().then(res => {
					res.data.forEach(item => {
						let obj = {}
						obj.text = item.dictLabel
						obj.value = item.dictValue
						this.buildList.push(obj)
					})
				})
			},
			// 获取未打卡学生列表
			getSdAttenceByCondition() {
				dormitoryCheck.getSdAttenceByCondition({
					accessDate: this.searchDate + " 00:00:00",
					buildingNo: this.buildNo,
					storey: this.storey,
					attenceStatus: this.attenceStatus,
				}).then(res => {
					this.unCheckStudentList = res.data
				})
			},
		},
		onLoad(options) {
			console.log(options)
			this.userName = uni.getStorageSync("userName")
			this.userInfo = uni.getStorageSync("userInfo")
			this.findDormBuilding()
			this.storey = options.storey
			this.attenceStatus = options.attenceStatus
			this.buildNo = options.buildNo
			this.current = Number(options.current)
			this.searchDate = options.date
			this.getSdAttenceByCondition()
			this.bzrUrl =
				`/pages_main/managementTeacher/attendanceStatistics/attendanceStatistics?date=${this.searchDate}&current=${this.current}`
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		/* background-color: #f1f1f1;  */
		/* height: 100vh; */
	}

	.miniButtonCard {
		width: 100rpx;
		background-color: antiquewhite;
		height: 75rpx;
		text-align: center;
		line-height: 75rpx;
	}

	.miniButtonHand {
		width: 100rpx;
		background-color: darkseagreen;
		height: 75rpx;
		text-align: center;
		line-height: 75rpx
	}

	.bigHandle {
		width: 100rpx;
		background-color: orange;
		height: 75rpx;
		text-align: center;
		line-height: 75rpx
	}

	.bigOver {
		width: 100rpx;
		background-color: green;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx
	}

	.midContent {
		border: 1rpx solid #ddd;
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		height: 75rpx;
		justify-content: space-around;
		border-radius: 10rpx;
	}

	.card {
		display: flex;
		align-items: center;
		padding: 40rpx 40rpx;
		font-size: 28rpx;
		/* border-top: 1rpx solid #ddd; */
	}

	.cardBorder {
		border-top: 1rpx solid #ddd;
	}

	.miniButton {
		padding: 15rpx 25rpx;
		border-radius: 10rpx;
		color: #fff;
		margin-left: 50rpx;
	}


	.button {
		/* padding: 10rpx 40rpx; */
		/* width: 200rpx; */

		text-align: center;
		color: #fff;
		/* background-color: red; */
		border-radius: 20rpx;
		font-size: 28rpx;
		padding: 10rpx 0;
		/* margin-left: 20rpx; */
	}

	.container {
		padding: 30rpx 50rpx;
		/* border-bottom: 1rpx solid #ddd; */
		text-align: center;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}

	.header {
		color: #000;
		width: 200rpx;
	}

	page {
		background-color: #f1f1f1;
	}

	/deep/.uni-date-x[data-v-6e13d7e2] {
		background-color: #e2e2e2;
		border-radius: 20rpx;
	}

	.textBox {
		text-align: center;
		padding: 10rpx 0;
		color: #aaa;
		font-size: 24rpx;
		/* padding: 5rpx 0; */

	}

	.firstBox {
		margin-top: 40rpx;
	}

	.midBoxContent {
		display: flex;
		font-size: 36rpx;
		font-weight: 700;
		padding: 30rpx 70rpx;
		border-radius: 20rpx;
		background-color: #fff;
		justify-content: space-around;
	}

	.datePickBox {
		padding: 40rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #f1f1f1;
		border-radius: 20rpx;
	}

	/deep/.segmented-control[data-v-064e9cd1] {
		height: 60rpx;
	}

	/deep/.segmented-control__item--text[data-v-064e9cd1] {
		padding: 6rpx;
		border-bottom-width: 6rpx;
	}
</style>